<template>
  <div class="alloc-menu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分配菜单</span>
      </div>
      <el-tree
      ref="roleTree"
        :data="menuList"
        node-key="id"
        :default-checked-keys="checkedKeys"
        show-checkbox
        default-expand-all
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
      <el-row class="btn-group">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="reset">清空</el-button>
      </el-row>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getMenuNodeList, allocateRoleMenus } from '@/apis/menu'
import { Tree } from 'element-ui'
export default Vue.extend({
  name: 'alloc-menu',
  props: {
    roleId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      menuList: [],
      defaultProps: {
        children: 'subMenuList',
        label: 'name'
      },
      checkedKeys: []
    }
  },
  created() {
    this.loadMenuList()
  },
  methods: {
    async loadMenuList() {
      const { data } = await getMenuNodeList()
      if (data.code === '000000') {
        this.menuList = data.data
        this.getCheckedKeys(this.menuList)
      }
    },
    getCheckedKeys(menu: any) {
      menu.forEach((item: any) => {
        if (item.selected) this.checkedKeys = [...this.checkedKeys, item.id] as never[]
        if (item.subMenuList) this.getCheckedKeys(item.subMenuList)
      })
    },
    handleNodeClick(data: any) {
      console.log(data)
    },
    async submit() {
      this.$confirm('是否要分配菜单？', '分配菜单', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async() => {
          const roleTree = this.$refs.roleTree as Tree
          const checkedKeys = roleTree.getCheckedKeys()
          const { data } = await allocateRoleMenus({
            roleId: this.roleId,
            menuIdList: checkedKeys
          })
          if (data.code === '000000') {
            this.$message.success('分配菜单成功')
          }
        })
        .catch(() => {
          this.$message.info('取消分配菜单')
        })
    },
    async reset() {
      this.$confirm('是否要清空菜单？', '清空菜单', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async() => {
          const roleTree = this.$refs.roleTree as Tree
          roleTree.setCheckedKeys([])
          const { data } = await allocateRoleMenus({
            roleId: this.roleId,
            menuIdList: []
          })
          if (data.code === '000000') {
            this.$message.success('清空菜单成功')
          }
        })
        .catch(() => {
          this.$message.info('取消清空菜单')
        })
    }
  }
})
</script>
<style lang="scss" scoped>
.alloc-menu {
  .btn-group {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
